<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue text-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">我的收藏</block>
			<block slot="right">
				<view class="action">
					<view class="cu-load load-cuIcon" :class="isLoad?'loading':'over'"></view>
				</view>
			</block>
		</cu-custom>
		<scroll-view scroll-y scroll-with-animation enable-back-to-top>
			<view class="cu-card article" v-for="(item, index) in itemList" :key="index" @tap="goDetail(item.articleId)">
				<view class="cu-item shadow">
					<view class="content">
						<image class="margin-top-sm" :src="item.coverImage || '/static/default.png'" mode="aspectFill"></image>
						<view class="desc">
							<view class="text-content margin-top-sm">{{ item.title }}</view>
						</view>
					</view>
					<view class="flex padding-left-sm padding-right-sm padding-top-sm justify-between">
						<view class="text-gray text-df">{{ formatDate(item.collectionTime) }}</view>
						<view class="text-gray text-sm text-right padding-right-sm">
							<text class="lg text-red cuIcon-delete" @tap.stop="del(item.id)"></text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-load-more iconType="auto" :status="status" />
	</view>
</template>

<script>
	import * as collection from '@/api/blog/member/collection.js'
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				isLoad: false,
				status: 'init',
				pages: 0,
				pageNumber: 1,
				itemList: []
			}
		},
		onLoad(options){
			this.search()
		},
		onReachBottom() {
			// 上拉加载下一页
			if (this.status === 'more') {
				this.search(this.pageNumber + 1)
			}
		},
		methods: {
			formatDate(date) {
				return this.$tools.formatDate(date)
			},
			search(pageNumber) {
				if (pageNumber) {
					this.status = 'loading'
					this.pageNumber = pageNumber
				} else {
					this.status = 'init'
					this.pages = 0
					this.pageNumber = 1
					this.itemList = []
				}
				collection.getPage({
					pageNumber: this.pageNumber
				}).then(res => {
					if (res.code === 1) {
						const data = res.data
						this.pages = data.pages
						if (this.pages == 0) {
							this.status = 'noData'
						} else {
							this.itemList = this.itemList.concat(data.rows)
							if (this.pages <= this.pageNumber) {
								this.status = 'noMore'
							} else {
								this.status = 'more'
							}
						}
					}
				})
			},
			goDetail(id){
				this.$tools.go('/pages/article/detail?id=' + id)
			},
			del(id) {
				const _this = this
				uni.showModal({
					title:'确认删除？',
					content: '确认删除后数据无法恢复！',
					confirmText:'确定',
					confirmColor:'#287FFA',
					success(res){
						if(res.confirm){
							_this.isLoad = true
							collection.del({
								id: id
							}).then(res =>{
								_this.isLoad = false
								if (res.code === 1) {
									_this.$tools.showToast({
									  msg: '删除成功！',
									  icon: 'success',
									  duration: 2000
									})
									setTimeout(()=>{
										_this.search()
									},2000)
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style>

</style>
